/*
 * @Author: szx
 * @Date: 2022-05-20 15:59:30
 * @LastEditTime: 2022-05-20 18:43:39
 * @Description:
 * @FilePath: \learn\HTML\图片\网易云首页轮播图\index.js
 */
let current_index = -1;
let swipe_timer = null;
let links = [
    { image: '../../images/cloud_music/1.jpg', target: '#1' },
    { image: '../../images/cloud_music/2.jpg', target: '#2' },
    { image: '../../images/cloud_music/3.jpg', target: '#3' },
    { image: '../../images/cloud_music/4.jpg', target: '#4' },
    { image: '../../images/cloud_music/5.jpg', target: '#5' },
    { image: '../../images/cloud_music/6.jpg', target: '#6' }
];
let swipe = document.querySelector('#swipe');
let swipe_bg = document.querySelector('#swipe_bg');
let swipe_img_box = document.querySelector('#swipe_img_box');
let swipe_link = document.querySelector('#swipe_link');
let swipe_img = document.querySelector('#swipe_img');
let swipe_select = document.querySelector('#swipe_select');
let swipe_btn_left = document.querySelector('#swipe_btn_left');
let swipe_btn_right = document.querySelector('#swipe_btn_right');

//手动切换图片事件
let select = (index) => {
    // 停止播放
    stop();
    // 转数字
    index = parseInt(index);
    // 越界判断
    if (index > links.length) return;
    // 选中当前以选中的，直接返回
    if (current_index == index) return;
    // 移除之前选中的指示点之前的样式。
    if (current_index > -1) {
        swipe_select.children[current_index].classList.remove('checked');
    }
    current_index = index;
    let current_links = links[current_index];
    // 变更图片链接等操作
    swipe_bg.style.backgroundImage = 'url(' + current_links.image + ')';
    swipe_img.setAttribute('src', current_links.image);
    swipe_link.setAttribute('href', current_links.target);
    swipe_select.children[current_index].classList.add('checked');
};
//自动轮播图片事件
let autoSelect = (index) => {
    index = parseInt(index);
    if (index >= links.length) return;
    if (current_index === index) return;
    swipe_select.children[current_index].classList.remove('checked');
    current_index = index;
    const current_link = links[current_index];
    // 第一步调整过渡时间
    swipe_img.style.transition = 'opacity 0.5s ease-in 0s';
    // 第二步调整不透明度为0.2
    swipe_img.style.opacity = 0.2;
    // 第三步延迟变换img图片，并重新定义透明度及过渡时间和过渡方式
    setTimeout(() => {
        // 背景变化
        swipe_bg.style.backgroundImage = 'url(' + current_link.image + ')';
        swipe_bg.style.transition = 'background-image 0.5s ease-out ';
        // 前景变化
        swipe_img.setAttribute('src', current_link.image);
        // 链接变化
        swipe_link.setAttribute('href', current_link.target);
        // 不透明变化
        swipe_img.style.transition = 'opacity 0.7s ease-out 0s';
        swipe_img.style.opacity = 1;
        // 增加新的指示点选中状态
        // 如果已经通过手动点击，选中则此处不再执行
        if (!document.querySelector('.swipe .checked')) {
            swipe_select.children[current_index].style.transition = 'background-coior 0.5s';
            swipe_select.children[current_index].classList.add('checked');
        }
    }, 500);
};
// 播放
let play = () => {
    swipe_timer = setInterval(() => {
        let index = (current_index + 1) % links.length;
        // 加载新的图片，这里选择自动，增加切换效果
        autoSelect(index);
    }, 3000);
};
// 停止
let stop = () => {
    if (swipe_timer) {
        clearInterval(swipe_timer);
        swipe_timer = null;
    }
};
// 初始化
let init = () => {
    for (let i = 0; i < links.length; i++) {
        const item = document.createElement('a');
        item.setAttribute('class', 'item');
        item.setAttribute('href', '#');
        item.setAttribute('data-index', i);
        swipe_select.appendChild(item);
    }
    select(0);
    bind();
    play();
};
// 绑定
let bind = () => {
    // 左翻事件
    swipe_btn_left.addEventListener('click', () => {
        let index = current_index - 1;
        if (index < 0) index = links.length - 1;
        select(index);
    });
    swipe_btn_right.addEventListener('click', () => {
        let index = (current_index + 1) % links.length;
        select(index);
    });

    // 挪到父元素上面监听，而不是每个子元素都用，降低性能负载
    swipe_select.addEventListener('click', (e) => {
        e.preventDefault();
        if (e.currentTarget != e.target) select(e.target.dataset.index);
    });
    /* 这种是每个小圆点都绑定事件，这样子就要绑定6个事件
    for (const key in swipe_select.children) {
        if (swipe_select.children.hasOwnProperty(key)) {
            const element = swipe_select.children[key];
            element.addEventListener('click', (e) => {
                e.preventDefault();
                // 跳转到当前指示点中data-index所指定的图片
                select(e.target.dataset.index);
            });
        }
    } */
    // 绑定鼠标移入事件
    swipe.addEventListener('mouseenter', (e) => {
        // 防止鼠标从子元素移除时触发
        // console.log(e.relatedTarget);
        // if (e.relatedTarget && swipe.compareDocumentPosition(e.relatedTarget) == 10) {
        // console.log('stop');
        stop();
        // }
    });
    // 绑定鼠标移除事件
    swipe.addEventListener('mouseleave', (e) => {
        // 防止鼠标从子元素移除时触发
        // if (e.relatedTarget && swipe.compareDocumentPosition(e.relatedTarget) == 10) {
        play();
        // }
    });
    // 绑定鼠标移动事件
    // swipe.addEventListener('mousemove', () => {
    //     console.log('stop')
    //     stop();
    // });
};

window.addEventListener('load', () => {
    init();
});
